<template>
  <!-- 兼职详情 -->
  <view class="box" @click=";(moreChage = false), (informationNoBubbles = false)">
    <view v-if="!loding">
      <!-- #ifdef MP-WEIXIN -->
      <view
        class="head"
        :style="
          'padding-top:' +
          statusBarHeight1 +
          'px;padding-right:' +
          (WXwidth + 15) +
          'px;height:' +
          (statusBarHeight1 + 44) +
          'px'
        "
      >
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view
          class="head"
          :style="
            'padding-top:' + (statusBarHeight1 + 10) + 'px;height:' + (statusBarHeight1 + 54) + 'px'
          "
        >
          <!-- #endif -->
          <image
            class="fanhui"
            @click="fanhui"
            src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/zp_04.png"
            mode=""
          >
          </image>
          <view class="head_right"> </view>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view
          :style="'padding-top:' + statusBarHeight1 + 'px;height:' + (statusBarHeight1 + 44) + 'px'"
        ></view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view
          :style="'padding-top:' + statusBarHeight1 + 'px;height:' + (statusBarHeight1 + 54) + 'px'"
        ></view>
        <!-- #endif -->
        <!-- 中间内容 -->
        <view class="center">
          <view class="center_top">
            <view class="number" @click.stop="informationNoBubbles = !informationNoBubbles">
              信息编号：{{ data.id }}
              <view class="informationNoBubble" v-if="informationNoBubbles">
                <view class="binds_1">
                  信息编号是唯一的信息身份号码，可在帮帮同城进行准确搜索查找。
                </view>
                <view class="binds_2"> 联系发布人时可通过信息编号确认信息。 </view>
              </view>
            </view>
            <view class="title">
              {{ data.title }}
            </view>
            <view class="position">
              <view class="position_left">
                <view class="dizhi">{{ data.region }}</view>
                <view class="zhiye">{{ data.positionCategory }}</view>
              </view>
              <view class="position_price"
                >{{ data.salaryRange.split(',').join('') }}
                {{ data.settlementMethod }}
              </view>
            </view>
            <view style="width: 690rpx">
              <text style="color: #999999">工作地点：</text>
              {{ data.workLocation }}
              <image
                class="dingwei"
                @click="openMap"
                src="https://pic.bangbangtongcheng.com/static/bbcz/daohang_01.png"
              />
            </view>
            <view class="benefitLabel" v-if="data.fringeBenefits">
              <view class="label" v-for="(i, j) in data.fringeBenefits.split(',')" :key="j">{{
                i
              }}</view>
            </view>
            <view class="need">
              <view class="need_label">
                <span class="view">性别要求：</span>
                {{
                  data.genderRequirements == 1 ? '男' : data.genderRequirements == 2 ? '女' : '不限'
                }}
              </view>
              <view class="need_label" v-if="data.workingHours">
                <span class="view">工作时段：</span>
                <span v-if="data.workingHours == '不限'">不限</span>
                <span v-else>
                  <view
                    style="margin-right: 10rpx"
                    v-for="(item, index) in data.workingHours.split('|')"
                    :key="index"
                  >
                    <span style="margin-right: 10rpx">{{ index + 1 }}.</span>
                    {{ item.split(',').join('-') }}</view
                  >
                </span>
              </view>
              <view class="need_label" v-if="data.employmentDate">
                <span class="view">工作日期：</span>
                <span v-if="data.employmentDate == '不限'">不限</span>
                <!-- 			<span
									v-else>{{data.employmentDate.split(',')[0].split('-')[1] + '月' + data.employmentDate.split(',')[0].split('-')[2] + '日'}}-
									{{data.employmentDate.split(',')[1].split('-')[1] + '月' + data.employmentDate.split(',')[1].split('-')[2] + '日'}}</span>
									 -->
                <view
                  style="margin-right: 10rpx"
                  v-for="(item, index) in data.employmentDate.split('|')"
                  :key="index"
                >
                  <span style="margin-right: 10rpx">{{ index + 1 }}.</span>
                  {{ item.split(',').join('-') }}</view
                >
              </view>
              <view class="need_label">
                <span class="view">工作周期：</span>
                {{ data.workCycle }}
              </view>
              <view class="need_label" v-if="data.recruitersNumber">
                <span class="view">招聘人数：</span>
                {{ data.recruitersNumber }}人
              </view>
            </view>
          </view>
          <view class="JobDescription">
            <view class="title"> 职位描述 </view>
            <text class="detailed">
              {{ data.jobDescription }}
            </text>
          </view>
          <!-- 分割线 -->
          <view class="cutApart"></view>

          <view class="center_bottom">
            <view class="Map">
              <view class="title"> 工作地点 </view>
              <view class="maps" @click="openMap">
                <image
                  style="width: 100%; height: 100%"
                  :src="
                    'https://apis.map.qq.com/ws/staticmap/v2/?zoom=11&scale=2&key=HUZBZ-ZQX6X-ZBO4M-TKCO5-7Q6ZZ-Z7FUL&size=345*160&center=' +
                    (data.latitude + ',' + data.longitude) +
                    '&markers=size:tiny|icon:https://pic.bangbangtongcheng.com/mapicon.png|' +
                    (data.latitude + ',' + data.longitude)
                  "
                  mode=""
                ></image>
                <!-- <map class="AppMap" ref="map1" :scale="13" id="map1" @markertap = 'openMap' @tap = 'openMap' @controltap="controlClick"
									:markers='markers' :controls="controls" :latitude="data.latitude" :longitude="data.longitude">
								</map> -->
              </view>
            </view>
            <view class="corporation">
              <template v-if="data.userInformationDto.enterpriseRecruitmentStatus == 1">
                <view class="briefIntroduction" @click="companyDetails">
                  <view class="title"> 公司简介 </view>
                  <image
                    class="image"
                    src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/zp_03.png"
                    mode=""
                  ></image>
                </view>
                <view class="corporation_center">
                  <view class="title">
                    {{ data.enterpriseName }}
                  </view>
                  <text class="content">
                    {{ data.companyProfile }}
                  </text>
                </view>
                <view class="environment" v-if="data.introductionPicture">
                  <image
                    class="image"
                    v-for="(i, j) in data.introductionPicture.split('|')"
                    @click="HJViewImage(i)"
                    :key="j"
                    :src="i"
                    mode="widthFix"
                  ></image>
                </view>
              </template>
              <view class="disclaimer">
                {{ disclaimers }}
              </view>
            </view>
          </view>
        </view>
        <informationNo ref="informationNo"></informationNo>
        <uniBall></uniBall>
      </view>
      <dLoading v-if="loding"></dLoading>
    </view>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        userInfo: uni.getStorageSync('Pduser'),
        beforePage: '',
        moreChage: false,
        WXwidth: '',
        disclaimers: '',
        controls: [],
        // 测试数据
        score: '3',
        markers: [],
        data: {},
        id: '',
        loding: true,
        indexss: 1,
        informationNoBubbles: false,
      }
    },
    onLoad(options) {
      var than = this
      // 获取微信小程序胶囊和据右边宽度
      // #ifdef MP-WEIXIN
      // 获取胶囊信息
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let getWindowInfo = uni.getWindowInfo().screenWidth
      this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
      // #endif
      this.id = options.id
      this.Disclaimers()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
      // #ifdef APP-PLUS
      var pages = getCurrentPages() //当前页
      this.beforePage = pages[pages.length - 2].route //上个页面、
      // #endif
    },
    onShow() {
      this.getData()
    },
    methods: {
      // 信息编号
      informationNos() {
        this.$refs.informationNo.informationNo_xxbh()
      },
      // 投递简历
      deliver() {
        if (this.userInfo.enterpriseRecruitmentStatus == 1) {
          uni.showToast({
            title: '您是公司身份，无法投递简历！',
            icon: 'none',
            mask: true,
          })
          return
        }
        // 判断是否有简历
        this.$myRequest
          .get('/api/mobile/personnelOwner/getResumeDetails', {
            publisherId: this.userInfo.id,
          })
          .then((res) => {
            if (res.biographicalNotesDetails) {
              // 有简历
              uni.navigateTo({
                url:
                  '/pages_recruitMoney/submitResume/deliver?userId=' +
                  this.data.userInformationDto.id +
                  '&index=1&status=1&id=' +
                  this.data.id,
              })
            } else {
              // 没有简历
              uni.navigateTo({
                url: '/pages_recruitMoney/publish/writeResume',
              })
            }
          })
      },
      // 免责声明
      Disclaimers() {
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: '12',
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      guanzhu() {
        if (!this.showLogin()) {
          return
        }
        let that = this
        this.$myRequest
          .post('/api/mobile/vehicleOwner/collectionOrCancelCollection', {
            collectorId: this.userInfo.id,
            relationId: this.data.userInformationDto.id,
            collectionType: '1',
            ids: this.data.userInformationDto.collectionId
              ? this.data.userInformationDto.collectionId
              : '',
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            if (this.data.userInformationDto.whetherCollection == 0) {
              this.addIntegral(5, '关注用户')
            }
            this.getData()
          })
      },
      //点击地图控件时触发
      controlClick(e) {
        switch (e.detail.controlId) {
          case 999:
            uni.createMapContext('map1', this).moveToLocation({
              latitude: this.data.latitude,
              longitude: this.data.longitude,
            })
            break
        }
      },
      lljl() {
        if (!this.userInfo.phone) {
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseBrowsingRecord', {
            browseRecordId: this.id,
            viewersId: this.userInfo.id,
            businessType: 4,
            browsingRecords: 7,
          })
          .then((res) => {})
      },
      doorSeen() {
        uni.navigateTo({
          url: '/pages_recruitMoney/visited/concurrently?id=' + this.data.id,
        })
      },
      shield() {
        uni.showActionSheet({
          itemList: ['不看这条信息', '不看TA发布的信息'],
          success: (res) => {
            if (res.tapIndex == 0) {
              this.getShield(1)
            } else {
              this.getShield(2)
            }
          },
          fail: function (res) {},
        })
      },
      getShield(index) {
        let data = {}
        if (index == 1) {
          data = {
            shieldPeople: this.userInfo.id,
            associationId: this.data.id,
            associationName: this.data.title,
            shieldingType: 3,
            shieldingTime: this.$Time.getTimes(),
          }
        } else {
          data = {
            shieldPeople: this.userInfo.id,
            associationId: this.data.userInformationDto.id,
            associationName: this.data.userInformationDto.nikeName || '未命名用户',
            shieldingType: 1,
            shieldingTime: this.$Time.getTimes(),
          }
        }
        this.$myRequest.post('/api/mobile/personnelOwner/increaseShield', data).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none',
            mask: true,
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            })
          }, 500)
        })
      },
      fn() {
        uni.showActionSheet({
          itemList: ['分享到微信好友', '分享到微信朋友圈'],
          success: (res) => {
            console.log(res)
            this.addIntegral(3)
            let wsxcene = null
            if (res.tapIndex == 0) {
              //分享到好友 可以发送小程序
              wsxcene = 'WXSceneSession'
              uni.share({
                provider: 'weixin',
                scene: wsxcene,
                type: 5,
                title: this.data.title,
                imageUrl: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg',
                miniProgram: {
                  id: 'gh_c8b17811efca',
                  path: 'pages_recruitMoney/recruitmentDetails/concurrently?id=' + this.id,
                  type: 0,
                  webUrl:
                    'https://www.bangbangtongcheng.com/conven_web/#/pages_recruitMoney/recruitmentDetails/concurrently?id=' +
                    this.id,
                },
                // summary: "我正在看，" + this.data.title + "赶紧跟我一起来查看！",
                success: function (res) {
                  console.log('success:' + JSON.stringify(res))
                },
                fail: function (err) {
                  console.log('fail:' + JSON.stringify(err))
                },
              })
            } else {
              uni.downloadFile({
                url: 'https://pic.bangbangtongcheng.com/6a1ff26f7e554c03aef0bdf118e4741a.jpeg', //仅为示例，并非真实的资源
                success: (res) => {
                  if (res.statusCode === 200) {
                    let name = res.tempFilePath.substr(res.tempFilePath.lastIndexOf('/') + 1) //截取文件名
                    plus.zip.compressImage(
                      {
                        src: res.tempFilePath, //下载完图片的临时路径
                        dst: '_doc/photoData/' + name, //存储压缩完图片的临时路径
                        overwrite: true, //再次压缩会覆盖掉上次的目录
                        width: '150px', //缩放图片的宽度
                        height: '100px', //缩放图片的高度
                        quality: 5, //压缩图片质量,值越低,图片占内存越低
                      },
                      (event) => {
                        //压缩成功
                        wsxcene = 'WXSceneTimeline' //分享到朋友圈 只能H5 或者图片
                        uni.share({
                          provider: 'weixin',
                          scene: wsxcene,
                          type: 0,
                          title: this.data.title,
                          href:
                            'https://www.bangbangtongcheng.com/conven_web/#/pages_recruitMoney/recruitmentDetails/concurrently?id=' +
                            this.id,
                          imageUrl: event.target,
                          summary: '我正在看，' + this.data.title || ' ' + '赶紧跟我一起来查看！',
                          success: function (res) {
                            console.log('success:' + JSON.stringify(res))
                          },
                          fail: function (err) {
                            console.log('fail:' + JSON.stringify(err))
                          },
                        })
                      },
                      (error) => {
                        //压缩失败
                        uni.showToast({
                          title: '压缩失败',
                          icon: 'none',
                        })
                      }
                    )
                  }
                },
              })
            }
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      chat() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${this.data.userInformationDto.id}&img=${this.data.userInformationDto.image}&nikeName=${this.data.userInformationDto.nikeName}&id=${this.data.id}&type=3&index=${this.indexss}`,
        })
        // if (this.indexss == 1) {
        // 	this.indexss = 2
        // }
      },
      jubao() {
        if (!this.showLogin()) {
          return
        }
        uni.navigateTo({
          url:
            '/pages_recruitMoney/index/report?id=' +
            this.data.id +
            '&userId=' +
            this.data.userInformationDto.id +
            '&index=1',
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      shouye() {
        uni.switchTab({
          url: '/pages/index/index',
        })
      },
      companyDetails() {
        uni.navigateTo({
          url:
            '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' +
            this.data.userInformationDto.id,
        })
      },
      async userfy(item) {
        if (!this.showLogin()) {
          return
        }
        let yy = await this.getjjr(item.id)
        if (yy.businessType == 1 && yy.shopType == 2 && yy.isShop == 1) {
          if (!yy.buildingId) {
            uni.showToast({
              title: '该商家还未发布楼盘！',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.navigateTo({
            url: '/pages_houses/houses/housesDetails?id=' + yy.buildingId,
          })
          return
        }
        if (yy.businessType == 1 && yy.shopType == 1 && yy.isShop == 1) {
          uni.navigateTo({
            url: '/pages_intermediary/shopDetails?id=' + yy.shopId,
          })
          return
        }
        if (yy.businessType == 2 && (yy.shopType == 1 || yy.shopType == 2) && yy.isShop == 1) {
          uni.navigateTo({
            url: '/pages_owner/dealer/dealerDetails?id=' + yy.shopId,
          })
          return
        }
        if (yy.businessType == 2 && (yy.shopType == 3 || yy.shopType == 4) && yy.isShop == 1) {
          uni.navigateTo({
            url: '/pages_owner/ownerService/ownerServiceDetails?id=' + yy.shopId,
          })
          return
        }
        if (yy.businessType == 0 && yy.enterpriseRecruitmentStatus == 1) {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' + yy.id,
          })
          return
        }
        uni.navigateTo({
          url: '/pages_owner/dealer/goldConsultant?userId=' + item.id,
        })
      },
      async getjjr(id) {
        let that = this
        let data = {}
        await this.$myRequest
          .get('/api/mobile/public/getPersonalHome', {
            otherId: id,
            ownerId: this.userInfo.id,
          })
          .then((res) => {
            data = res.personalHomeData
          })
        return data
      },
      openMap() {
        // console.log(this.data.latitude, this.data.longitude);
        let that = this
        /* #ifdef H5 */
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(that.data.latitude), //目的地latitude
                longitude: Number(that.data.longitude), //目的地longitude
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(that.data.latitude),
          longitude: Number(that.data.longitude),
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
      sc() {
        if (!this.userinfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        let that = this
        this.$myRequest
          .post('/api/mobile/public/favoriteFollowOrCancelFavoriteFollow', {
            collectorId: this.userInfo.id,
            collectionType: 7,
            relationId: this.data.id,
            id: this.data.followCollections ? this.data.followCollections.id : '',
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
            })
            if (this.data.whetherCollection == 0) {
              this.addIntegral(5, '收藏招聘')
            }
            this.getData()
          })
      },
      addIntegral(val, title) {
        this.$myRequest
          .post('/mob/iteration/addIntegral', {
            userId: this.userInfo.id,
            ruleNumber: val,
            title: title || '转发兼职招聘',
          })
          .then((res) => {})
      },
      async getPhone() {
        this.onphone()
      },
      onphone() {
        if (!this.userinfo.phone) {
          uni.showModal({
            title: '',
            content: '尚未登录，前往登录？',
            showCancel: true,
            success: (res) => {
              if (res.confirm) {
                //#ifdef H5
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef APP-PLUS
                uni.navigateTo({
                  url: '/pages/login/login?isNeedBack=true',
                })
                //#endif
                //#ifdef MP-WEIXIN
                uni.navigateTo({
                  url: '/pages/login/phoneLogin',
                })
                //#endif
              }
            },
          })
          return
        }
        this.$myRequest
          .post('/api/mobile/public/increaseCallRecord', {
            userId: this.userInfo.id,
            businessType: '4',
            telephoneNumber: this.data.userInformationDto.phone,
            associationId: this.data.id,
            callType: 7,
          })
          .then((res) => {})
        uni.makePhoneCall({
          // 手机号
          phoneNumber: this.data.userInformationDto.phone,
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },

          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          },
        })
      },
      getData(status) {
        let that = this
        this.$myRequest
          .get('/api/mobile/personnelOwner/getRecruitmentById', {
            id: this.id,
            userId: this.userInfo.id,
          })
          .then((res) => {
            this.data = res.recommendedPosition
            if (res.recommendedPosition.latitude) {
              this.markers = [
                {
                  id: 1,
                  latitude: res.recommendedPosition.latitude,
                  longitude: res.recommendedPosition.longitude,
                  iconPath: 'https://pic.bangbangtongcheng.com/locationpic.png',
                  width: 30,
                  height: 30,
                  anchor: {
                    x: 0.5,
                    y: 0.5,
                  },
                },
              ]
            }
            that.$nextTick(() => {
              setTimeout(() => {
                this.loding = false
                // if(!this.controls.length){
                // 	this.mapdian()
                // }
              }, 1000)
            })
          })
      },
      mapdian() {
        this.$nextTick(() => {
          uni
            .createSelectorQuery()
            .in(this)
            .select('.maps')
            .fields(
              {
                size: true,
              },
              (res) => {
                this.controls.push({
                  id: 999,
                  iconPath: 'https://pic.bangbangtongcheng.com/static/dingwei1.png',
                  clickable: true,
                  position: {
                    left: res.width - 50,
                    top: 100,
                    width: 50,
                    height: 60,
                  },
                })
              }
            )
            .exec()
        })
      },
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
  }
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    padding-bottom: 160rpx;
  }

  .head {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background-color: #fff;
    z-index: 1000;

    .fanhui {
      width: 40rpx;
      height: 40rpx;
    }

    .head_right {
      display: flex;
      align-items: center;

      .smkk {
        width: 146rpx;
        height: 50rpx;
        border-radius: 24rpx;
        border: 4rpx solid #64b6a8;
        font-size: 26rpx;
        font-weight: 500;
        color: #64b6a8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 30rpx;
      }

      .fanx {
        width: 54rpx;
        height: 54rpx;
        margin-right: 30rpx;
      }

      .genduo {
        width: 36rpx;
        height: 36rpx;
        display: flex;
        align-items: center;
        position: relative;

        .image {
          width: 100%;
          height: 8rpx;
        }

        .administrations {
          width: 140rpx;
          height: 180rpx;
          background-color: #fff;
          position: absolute;
          right: -10rpx;
          bottom: -210rpx;
          box-shadow: 0px 0px 20px 1px #d0d0d0;
          z-index: 100;
          padding: 0 32rpx;
          display: flex;
          flex-direction: column;

          .items {
            height: 72rpx;
            color: #5a5e66;
            font-size: 28rpx;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &::before {
            content: '';
            display: inline-block;
            border-left: 24rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 24rpx solid #fff;
            position: absolute;
            right: 12rpx;
            top: -22rpx;
          }
        }
      }
    }
  }

  .feahd_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 120rpx;
    padding: 0 30rpx;
    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 1000;

    .sendResume {
      width: 242rpx;
      height: 70rpx;
      background-color: #64b6a8;
      border-radius: 10rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feahd_right {
      flex: 1;
      margin-left: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        font-weight: 400;
        color: #333333;

        .img {
          width: 54rpx;
          height: 54rpx;
        }
      }
    }
  }

  .customCallout {
    box-sizing: border-box;
    width: 300rpx;
    height: 200rpx;
    background-color: #000;
    background: #ffffff;
    box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
    border-radius: 4rpx;
    display: inline-flex;
    padding: 6rpx 24rpx;
    justify-content: center;
    align-items: center;
    color: #2a7be2;
  }

  .center {
    width: 100%;
    margin-top: 20rpx;

    .center_top {
      margin: 0 30rpx;
      padding-bottom: 36rpx;
      border-bottom: 1px dashed #d0d0d0;

      .number {
        font-size: 28rpx;
        font-weight: 400;
        color: #64b6a8;
        margin-bottom: 20rpx;
        position: relative;

        .informationNoBubble {
          width: 500rpx;
          padding: 10rpx;
          border-radius: 10rpx;
          background-color: #ffffff;
          position: absolute;
          bottom: -150rpx;
          border: 1px solid #888;
          left: 150rpx;
          z-index: 1;

          .binds_1 {
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            margin-bottom: 10rpx;
          }

          .binds_2 {
            font-size: 24rpx;
            font-weight: 400;
            color: #64b6a8;
          }

          &::before {
            width: 0px;
            height: 0px;
            position: absolute;
            padding: 0;
            border-left: 24rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 24rpx solid #fff;
            content: '';
            z-index: 12;
            position: absolute;
            left: 12rpx;
            top: -20rpx;
          }

          &::after {
            width: 0px;
            height: 0px;
            position: absolute;
            padding: 0;
            border-left: 24rpx solid transparent;
            border-right: 20rpx solid transparent;
            border-bottom: 24rpx solid #888;
            content: '';
            z-index: 10;
            position: absolute;
            left: 12rpx;
            top: -24rpx;
          }
        }
      }

      .title {
        font-size: 34rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 24rpx;
      }

      .position {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .position_left {
          display: flex;
          align-items: center;

          .dizhi {
            font-size: 28rpx;
            font-weight: 400;
            color: #888888;
            margin-right: 24rpx;
          }

          .zhiye {
            font-size: 28rpx;
            font-weight: 400;
            color: #333;
          }
        }

        .position_price {
          font-size: 32rpx;
          font-weight: 600;
          color: #e32d2d;
        }
      }

      .benefitLabel {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .label {
          margin-bottom: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 10rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #64b6a8;
          border-radius: 4rpx;
          border: 1px solid #64b6a8;
          margin-right: 20rpx;
        }
      }

      .need {
        .need_label {
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          margin-bottom: 14rpx;

          .view {
            color: #999;
          }
        }
      }
    }

    .JobDescription {
      width: 750rpx;
      padding: 0 30rpx;
      margin: 32rpx 0 32rpx 0;

      .title {
        font-size: 34rpx;
        font-weight: 550;
        color: #333333;
        margin-bottom: 16rpx;
      }

      .detailed {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        line-height: 50rpx;
      }
    }

    .cutApart {
      width: 750rpx;
      height: 20rpx;
      background-color: #f2f2f2;
    }

    .center_bottom {
      width: 750rpx;
      padding: 0 30rpx;

      .Map {
        margin-top: 32rpx;
        margin-bottom: 32rpx;
        width: 690rpx;

        .title {
          font-size: 34rpx;
          font-weight: 550;
          color: #333333;
          margin-bottom: 16rpx;
        }

        .maps {
          width: 100%;
          height: 160px;

          .AppMap {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
            overflow: hidden;
          }
        }
      }

      .corporation {
        .briefIntroduction {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 16rpx;

          .title {
            font-size: 34rpx;
            font-weight: 550;
            color: #333333;
          }

          .image {
            width: 38rpx;
            height: 38rpx;
          }
        }

        .corporation_center {
          margin-bottom: 16rpx;

          .title {
            font-size: 32rpx;
            font-weight: 550;
            color: #333333;
            margin-bottom: 10rpx;
          }

          .content {
            font-size: 26rpx;
            font-weight: 400;
            color: #333333;
          }
        }

        .environment {
          .image {
            width: 100%;
          }
        }

        .personalCard {
          width: 100%;
          height: 222rpx;
          background-color: #ffffff;
          box-shadow: 0px 0px 6rpx 1rpx rgba(0, 0, 0, 0.16);
          border-radius: 18rpx;
          margin-top: 32rpx;
          margin-bottom: 45rpx;
          position: relative;

          .lookOver {
            width: 200rpx;
            height: 60rpx;
            background-color: #64b6a8;
            border-radius: 0px 18rpx 0px 18rpx;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .personalCard_center {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;

            .left {
              margin-left: 30rpx;
              display: flex;
              align-items: center;
              height: 100%;

              .headSculpture {
                position: relative;
                width: 120rpx;
                height: 120rpx;

                .image {
                  width: 120rpx;
                  height: 120rpx;
                  border-radius: 120rpx;
                }

                .name {
                  position: absolute;
                  bottom: 0;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 100rpx;
                  height: 36rpx;
                  font-size: 24rpx;
                  color: #fff;
                  text-align: center;
                  line-height: 36rpx;
                  background: url('https://pic.bangbangtongcheng.com/static/name.png');
                  background-size: 100% 100%;
                }
              }

              .information {
                margin-left: 24rpx;
                padding: 32rpx 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .name {
                  width: 300rpx;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  font-size: 36rpx;
                  font-weight: 400;
                  color: #333333;
                  margin-bottom: 10rpx;
                }

                .vip-label {
                  width: 116rpx;
                  text-align: center;
                  padding: 3rpx 0;
                  background: #f6f0ff;
                  border-radius: 6rpx 6rpx 6rpx 6rpx;
                  opacity: 1;
                  border: 2rpx solid #bd90d9;
                  font-size: 24rpx;
                  font-weight: 500;
                  color: #bd90d9;
                  margin-bottom: 10rpx;
                }

                .grade {
                  display: flex;
                  align-items: center;

                  .image {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 10rpx;
                  }
                }
              }
            }

            .right {
              margin-right: 40rpx;
              display: flex;
              align-items: center;

              .image {
                width: 54rpx;
                height: 54rpx;
                margin-right: 10rpx;
              }

              .GZ {
                font-size: 24rpx;
                font-weight: 400;
                color: #333333;
              }
            }
          }
        }

        .disclaimer {
          font-size: 24rpx;
          font-weight: 400;
          color: #989898;
          line-height: 40rpx;
        }
      }
    }
  }

  .dingwei {
    width: 50rpx;
    height: 50rpx;
    vertical-align: middle;
    margin-bottom: 20rpx;
  }
</style>
